<template>
  <div>
      <el-form label-position="right" :model="IDCardForm" ref="IDCardForm" :rules="rules" label-width="150px">
        <el-form-item label="身份证照片：" prop="sfzImage">
          <img
            v-if="IDCardForm.sfzImage==null"
            src=""
            height="100px"
            width="100px"
          />
          <img v-else :src="IDCardForm.sfzImage" height="100px" width="100px" />
        </el-form-item>
        <el-row>
        <el-col :span="12">
          <el-form-item label="姓名:" prop="name">
            <el-input v-model="ruleForm.name" placeholder="请输入姓名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="年龄:" prop="age">
            <el-input v-model="ruleForm.age" placeholder="请输入年龄"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="婚姻状况:" prop="marriage">
            <el-input v-model="ruleForm.marriage" placeholder="请输入婚姻状况"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="文化程度:" prop="culture">
            <el-input v-model="ruleForm.culture" placeholder="请输入文化程度"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="手机号码:" prop="phone">
            <el-input v-model="ruleForm.phone" placeholder="请输入婚姻状况"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="就业信息:" prop="work" >
            <el-input v-model="ruleForm.work" placeholder="请输入就业信息"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="证件号码:" prop="phone">
            <el-input v-model="ruleForm.phone" placeholder="请输入证件号码"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别:" prop="work" >
            <el-input v-model="ruleForm.work" placeholder="请输入性别"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="民族:" prop="phone">
            <el-input v-model="ruleForm.phone" placeholder="请输入民族"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出生日期:" prop="work" >
            <el-input v-model="ruleForm.work" placeholder="请输入出生日期"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
        
        
        <!--检测是否装有插件-->
        <object id="CertCtl" ref="CertCtl" type="application/cert-reader" width="0" height="0">
          <p class="classP" style="color:#FF0000;">控件未安装或不可用，请检查安装后在使用！</p>
        </object>
      </el-form>
      <el-row :gutter="20" class="mb8">
        <el-col :span="12" style="text-align: right;">
          <el-button type="success" icon="el-icon-plus" size="mini" @click="connect">连接</el-button>
        </el-col>
        <!-- <el-col :span="8">
					<el-button type="warning" icon="el-icon-download" size="mini" @click="readCert">读卡</el-button>
        </el-col>-->
        <el-col :span="12" style="text-align: left;">
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="disconnect()">断开</el-button>
        </el-col>
      </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        name: "",
        age: "",
        marriage: "",
        culture: "",
        phone: "",
        work: "",
        sex: "1",
        email: "",
        role:'',
        account: "",
        password: ""
      },
      // 对话框的显隐
      showDialog: false,
      CertCtl: "",
      // 查询参数
      IDCardForm: {
        name: "", // 姓名
        idCardNumber: "", // 身份证号码
        sex: "", // 性别
        nation: "", // 民族
        birthday: "", // 出生日期
        sfzImage: null // 身份证照片
      },
      // 表单参数
      // IDCardForm: {},
      rules: {},
      timer: ""
    };
  },
  methods: {
     parseExcel (file, fileList) {
            // 分析头信息是否是excel
            if (
                file.raw.type != 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                && file.raw.type != 'application/vnd.ms-excel'
            ) {
                this.$notify.error({
                  title: '错误',
                  message: '请上传Excel类型的文件'
                });
                this.$refs.upload.clearFiles();
                return false
            }

            let reader = new FileReader()
            let rABS = typeof FileReader !== "undefined" && (FileReader.prototype||{}).readAsBinaryString
            // 重点是下面的 file.raw
            if (rABS) {
                reader.readAsBinaryString(file.raw)
            } else {
                reader.readAsArrayBuffer(file.raw)
            }
            reader.onload = function(e) {
                let data = e.target.result
                if (!rABS) {
                    data = new Uint8Array(data)
                }
                let workBook = XLSX.read(data, {type: rABS ? 'binary' : 'array'})
                workBook.SheetNames.forEach(name => {
                    let sheet = workBook.Sheets[name]
                    let json = XLSX.utils.sheet_to_json(sheet, {
                        raw: false,
                        header: 1
                    })
                    // TODO 处理数据
                })
        }},
    // 重置表单
    reset() {
      this.IDCardForm = {
        name: "", // 姓名
        idCardNumber: "", // 身份证号码
        sex: "", // 性别
        nation: "", // 民族
        birthday: "", // 出生日期
        // sfzyxqrq: "", //身份证有效起日期
        // sfzyxzrq: "", // 身份证有效止日期
        sfzImage: null // 身份证照片
      };
      // this.resetForm("IDCardForm")
    },
    // 读取身份证按钮
    readIDCard() {
      this.showDialog = true;
    },
    // 对话框的右上角那个叉叉
    closeDialog() {
      this.showDialog = false;
      this.reset()
      clearInterval(this.timer);
    },
    // 对话框的确定按钮
    submitForm() {
      console.log(this.IDCardForm,99)
      this.showDialog = false;
    },
    // 对话框的取消按钮
    cancelForm() {
      this.showDialog = false;
      this.reset()
      // 清除定时器
      clearInterval(this.timer);
    },
    // 连接读卡器
    connect() {
      this.reset();
      try {
        const result = CertCtl.connect();
        let resultObj = JSON.parse(result);
        this.IDCardForm.sfzImage = null;
        // 判断状态是否连接成功
        if (resultObj.resultFlag == "0") {
          this.$message.warning("连接成功");
        }
      } catch (e) {}
      // 设置定时器 每三秒调用一次方法，就是每三秒读卡读取一次
      this.timer = setInterval(this.readCertAuto, 3000);
    },
    // 读卡
    readCertAuto() {
      this.reset();
      const result = CertCtl.readCert();
      let resultObj = JSON.parse(result);
      console.log("2222", resultObj);
      this.IDCardForm.name = resultObj.resultContent.partyName;
      this.IDCardForm.idCardNumber = resultObj.resultContent.certNumber;
      this.IDCardForm.sex = resultObj.resultContent.gender;
      this.IDCardForm.nation = resultObj.resultContent.nation;
      this.IDCardForm.birthday = resultObj.resultContent.bornDay;
      // this.IDCardForm.sfzyxqrq = resultObj.resultContent.effDate;
      // this.IDCardForm.sfzyxzrq = resultObj.resultContent.expDate;
      this.IDCardForm.sfzImage =
        "data:image/jpeg;base64," + resultObj.resultContent.identityPic;
    },
    // 断开连接
    disconnect() {
      this.reset();
      try {
        const result = CertCtl.disconnect();
        let resultObj = JSON.parse(result);
        this.IDCardForm.sfzImage = null;
        if (resultObj.resultFlag == "1") {
          this.$message.warning("连接已断开");
        }
        clearInterval(this.timer);
      } catch (e) {}
    }
  },
  destroyed() {
    clearInterval(this.timer);
  }
};
</script>

<style lang="less" scope>
.el-form-item{
margin-bottom: 10px ;
}
.el-input__inner{
  width: 300px;
  margin-bottom: 20px;
}
.classP{
  text-align: center;
}
</style>